<template>
    <div style="margin:0 auto">
        <span style="color: #107ce1;cursor: pointer;" v-if="code" @click="handleSelect()">{{ code }}</span>
        <el-button style="border: 1px solid #107ce5!important;" @click="handleSelect()" v-else>选择</el-button>
        <el-dialog v-if="open" :title="title" v-model="open" width="900px" append-to-body>
          <p></p>
            <el-table ref="tableRef" :data="dataList" stripe row-key="id">
                <el-table-column type="expand" width="1">
                    <template #default="props">
                        <div class="expandTable">
                            <h3>更多信息</h3>
                            <p>版本说明: {{ props.row.versionDesc }}（此处是版本说明，<span style="color:red">限制300字以内</span> ）</p>
                            <p>数据说明: {{ props.row.dataDesc }}（此处是数据说明，<span style="color:red">限制300字以内</span> ）</p>
                            <p v-if="props.row.updateDesc">更新说明: {{ props.row.dataType }}</p>
                            <p>使用系统: {{ props.row.useThisSystems }}
                                <el-tooltip class="box-item" content="Right Center prompts info" placement="right">
                                    <el-tag>系统使用说明</el-tag>
                                </el-tooltip>
                            </p>
                            <p>数据文件:
                                <template v-for="item in props.row.dataFileList">
                                    <u style="color:#107ce5;cursor: pointer;" @click="handleDownload(item)">{{
                                        item.name
                                    }}</u><br />
                                </template>
                            </p>
                            <p>附件:
                                <template v-for="item in props.row.attachmentList">
                                    <u style="color:#107ce5;cursor: pointer;" @click="handleDownload(item)">{{
                                        item.name
                                    }}</u><br />
                                </template>
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单选" width="55px">
                    <template #default="scope">
                        <el-radio :label="scope.row.id" v-model="selectRadio"
                            @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="版本日期" align="center" prop="versionTime" />
                <el-table-column label="版本号" align="center" width="190" prop="versionCode" />
                <el-table-column label="数据范围" align="center" prop="dataRangeStr" />
                <el-table-column label="上传日期" align="center" prop="uploadTime" />
                <el-table-column label="上传人" align="center" prop="userName" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="text" @click="handleMore(scope.row)">更多数据</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page"
                v-model:limit="queryParams.rows" @pagination="handleSelect" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="plot">确 定</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import { listVersion } from "@/api/system/selectVersion"
const emits = defineEmits(['getSelecVersion'])
const { proxy } = getCurrentInstance();
const props = defineProps({
    modelValue: String,
    num: {
        type: [Number, String],
    },
    title: {
        type: String,
        default: ''
    },
    list:{
      type: [String, Object, Array],
      default:[]
    },
    name:{
      type: String,
        default: ''
    },
    index:{
      type: Number,
      default:0
    }
})
const open = ref(false);
const dataList = ref([]);
const total = ref(0);
const selectionData = ref({});
const selectRadio = ref(undefined);
const forbidden = ref(true);
const code = ref(undefined);
const data = reactive({
    queryParams: {
        rows: 10,
        page: 1,
    }
})

const { queryParams } = toRefs(data);

watch(() => props.modelValue, val => {
  if (val) {
    code.value = val;
  } else {
    code.value = undefined;
  }
},{ deep: true, immediate: true });

// 下载文件
function handleDownload(row) {
  var query = {
    attachId: row.id,
    name: row.name
  }
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
}

function handleSelect() {
    listVersion({...queryParams.value, num: props.num,list: props.list}).then(response => {
        dataList.value = response.rows ? response.rows : [];
        total.value = response.total;
        open.value = true;
        selectionData.value = {};
        selectRadio.value = undefined;
        forbidden.value = true
    })
}
function  getCurrentRow (row) {
    if (!forbidden.value) {
      forbidden.value = true
    }
    if (selectRadio.value) {
      if (selectRadio.value == row.id) {
        selectRadio.value = ''
        forbidden.value = false
        setTimeout(() => {
          forbidden.value = true
        }, 0)
        selectionData.value = {};// 取消勾选就把回传数据清除
        return
      } else {
        forbidden.value = false
        setTimeout(() => {
          forbidden.value = true
        }, 0)
      }
    } else {
      forbidden.value = false
      setTimeout(() => {
        forbidden.value = true
      }, 0)
    }
    selectRadio.value = row.id;
    selectionData.value = row;
  }


// 更多数据
function handleMore(row) {
  proxy.$refs['tableRef'].toggleRowExpansion(row);
}

function plot() {
  if(!selectRadio.value){
    //未选择
    open.value = false;
    emits('getSelecVersion',{name:props.name,code:null,index:props.index})
  }else{
    open.value = false;
    code.value = selectionData.value.versionCode;
    emits('getSelecVersion',{name:props.name,code:code.value,index:props.index})
  }
}

defineExpose({
  code
});
</script>

<style lang="scss" scoped>
.expandTable {
    padding: 5px 20px 5px 105px;
  
    h3 {
      font-weight: bold;
    }
  
    p {
      margin: 0px;
      line-height: 25px !important;
    }
  }

  :deep(.el-table__expand-icon) {
    display: none;
}
</style>